CSS Animate On Scroll With No JS

#style #css #no_js #webdev #animation

Trigger CSS animation when element comes into view. No javascript, no libraries.

CSS

.block {
	animation: appear linear;
	animation-timeline: view();
	animation-range: entry 0% cover 40%;
}

@keyframes appear {
	from {
		opacity: 0;
		scale: 0.5;
	}
	to {
		opacity: 1;
		scale: 1;
	}
}

<div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
</div>

Credit